<template>
    <div class="home">
        <!-- 头部 -->
        <div class="content">
            <van-button type="danger" to="/city">城市</van-button>
            <van-cell-group inset>
                <van-field @focus="gotoSearch" v-model="value" placeholder="卡姿兰大眼睛"/>
            </van-cell-group>
            <van-button type="danger" to="/user">我的</van-button>
        </div>
        <van-pull-refresh v-model="Refreshloading" @refresh="onRefresh">
            <!-- 轮播图 -->
            <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
                <van-swipe-item v-for="item in bannerArr" :key="item.bannerid">
                    <img :src="item.img">
                </van-swipe-item>
            </van-swipe>
            <div class="miaosha">
                <div class="title">
                    <h3>京东秒杀</h3>
                    <p>{{ timer }}点场</p>
                    <van-count-down :time="time">
                        <template #default="timeData">
                            <span class="block">{{ timeData.hours < 10 ? '0' + timeData.hours : timeData.hours }}</span>
                                    <span class="colon">:</span>
                                    <span class="block">{{ timeData.minutes < 10 ? '0' + timeData.minutes : timeData.minutes
                                    }}</span>
                                            <span class="colon">:</span>
                                            <span class="block">{{ timeData.seconds
                                                    < 10 ? '0' + timeData.seconds : timeData.seconds
                                            }}</span>
                        </template>
                    </van-count-down>
                </div>
                <!-- 秒杀数据 -->
                <van-grid class="seconds" :border="false" :column-num="6">
                    <van-grid-item v-for="item in secondsArr" :key="item.id">
                        <van-image :src="item.img1" />
                        <span>${{ item.originprice }}</span>
                    </van-grid-item>
                </van-grid>
                <!-- 商品展示列表 -->
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <van-grid class="list" :border="false" :column-num="2">
                        <van-grid-item @click="gotoDetailFn(item.proid)" v-for="item in prolistArr" :key="item.id">
                            <van-image :src="item.img1" />
                            <p>{{ item.proname }}</p>
                            <span>￥{{ item.originprice }}</span>
                        </van-grid-item>
                    </van-grid>
                </van-list>
            </div>
        </van-pull-refresh>
    </div>
</template>


<script setup lang="ts">
import { ref, type Ref } from 'vue'
import { useRoute } from 'vue-router';
// 引入首页接口请求
import { bannerlist, prolist, seckilllist } from '@/api/homeapi'
import { useRouter } from 'vue-router'
let value = ref<string>('')     // 搜索框
const timer = (new Date().getHours() + 2) % 2 == 0 ? new Date().getHours() + 2 : new Date().getHours() + 1   // 定义倒计时场次时间
console.log('毫秒数', new Date().getTime());
const time = ref(2 * 60 * 60 * 1000)    // 倒计时时间

// 定义获取的数组数据的每项的类型
interface itemType {
    [propName: string]: any
}
let bannerArr: Ref<Array<itemType>> = ref([])        // 轮播图数据数组
let secondsArr: Ref<Array<itemType>> = ref([])        // 秒杀数据数组
let prolistArr: Ref<Array<itemType>> = ref([])        // 当前展示商品的数据数组
const loading = ref(false);                   // list 组件加载状态  false:加载好了  true:加载中
const finished = ref(false);                  // false:没有加载完成 true:加载完成同时显示finished-text属性值 默认是false表示加载更多数据
const Refreshloading = ref(false);            // 下拉刷新组件是否加载中
let count = ref(0)                              // 初始值为0，因为开始加载时，count已经++了一次
const router = useRouter()
const route = useRoute()
console.log(route.meta);
// 搜索框获得焦点的时候跳转到搜索页面
const gotoSearch=()=>{
    router.push('/search')
}
// 调用轮播图接口
bannerlist().then((res: any) => {
    console.log('轮播图数据', res);
    if (res.code == 200) {
        bannerArr.value = res.data
    }
})
// 调用秒杀列表接口
seckilllist({ count: 1, limitNum: 6 }).then((res: any) => {
    console.log('秒杀列表接口', res);
    if (res.code == 200) {
        secondsArr.value = res.data
    }
})
// list组件加载展示
const onLoad = () => {
    count.value++
    // 调用商品分页列表数据
    prolist({ count: count.value, limitNum: 10 }).then((res: any) => {
        console.log('商品分页列表数据', res);
        if (res.code == 200) {
            // 每次调用接口请求 将获取的数据 添加到 需要展示的数据中
            prolistArr.value = prolistArr.value.concat(res.data)
            // 加载状态结束
            loading.value = false;
            // 数据全部加载完成   根据请求接口中是否还有数据来判断是否加载完成
            if (res.data.length == 0) {
                finished.value = true;
            }
        }
    })
}
// 下拉刷新组件
let onRefresh = () => {
    count.value = 0         // 让其重新请求第一组的数据
    prolistArr.value = []   //清空当前展示的数据
    onLoad()              // 调用加载列表的方法
    Refreshloading.value = false;   // 下拉刷新组件加载完成
}
// 点击商品跳转到详情页
let gotoDetailFn = (proid: string) => {
    console.log(proid);
    router.push(`/details/${proid}`)
}








</script>


<style lang="scss" scoped>
.home {
    background-color: #f6f6f6;
}

.content {
    display: flex;
    background-color:#ee0a24;
}

.van-button {
    width: 64px;
    height: 44px;
}

.van-cell-group {
    width: 247px;
    margin: 0;
    background-color:#ee0a24;
    border-radius: 0;
}
::v-deep input.van-field__control::-webkit-input-placeholder{
    color: #551a8b;
    font-size: 14px;
}
::v-deep .van-cell-group .van-field{
    border-radius: 30px;
}

.my-swipe .van-swipe-item {
    text-align: center;
    margin-top: 10px;

    img {
        width: 335px;
        height: 335px;
        border-radius: 20px;
    }
}

.miaosha {
    margin: 10px 6px;
    border-radius: 20px;
    background-color: #fff;
}

.colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
}

.block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
}

.title {
    display: flex;
    padding: 10px 10px 0;
    justify-content: space-between;
    align-items: center;
}

.seconds {
    img {
        height: 60px;
    }

    span {
        margin-top: 6px;
        color: #ee0a24;
        font-weight: 600;
    }
}

.list {
    p {
        width: 165.5px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 13px;
    }

    span {
        color: #ee0a24;
        margin-left: -110px;
        font-weight: 600;
    }
}
</style>